<template>
    <div class="page-container">
		<el-form :inline="true" :model="search" size="small" ref="searchForm">
				<el-form-item label="标题:" >
					<el-input placeholder="请输入优惠卡名称" v-model="search.title" @change="filterSubmit" clearable></el-input>
				</el-form-item>
				<el-form-item label="状态:" >
					<el-select v-model="search.status"   placeholder="请选择状态"  @change="filterSubmit" clearable>
					    <el-option
					      v-for="item in statusOptions"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value"
					    />
					  </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="filterSubmit">查询</el-button>
					<el-button @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		
        <el-row>
            <el-button size="small" type="primary" @click="add">添加文章</el-button>
            <el-tag v-if="!inputVisible" size="ml-1" style="margin-left: 20px" type="success">{{ inputValue == '' || inputValue == null ? '请添加文章标签':inputValue }}</el-tag>
            <el-input            
                v-if="inputVisible"
                ref="InputRef"
                v-model="inputValue"
                style="width: 120px; margin-left: 20px"
                class="ml-1 w-20"
                size="small"
            />
            <el-button v-else class="button-new-tag ml-1" size="small" style="margin-left: 10px" @click="showInput">编辑文章标签</el-button>
            <el-button v-if="inputVisible" style="margin-left: 10px;" size="small" type="primary" @click="updateTag">确定</el-button>
            <el-button v-if="inputVisible" size="small" @click="inputVisible = false">取消</el-button>
        </el-row>
        <div class="table-list">
            <el-table :data="list" size="small">
                <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                <el-table-column label="文章标题" prop="title"></el-table-column>
				<el-table-column label="作者" prop="author"></el-table-column>
				<el-table-column label="摘要" prop="articleAbstract"></el-table-column>
                <el-table-column label="状态" prop="status">
                    <template #default="scope">
                        <el-switch size="small" v-model="scope.row.status" :active-value="'0'" :inactive-value="'1'"
                            :active-text="scope.row.status == 1 ? '关闭' : '开启'"
                            @change="changeStatus(scope.row)"
                            ></el-switch>
							<!-- @change="changeStatus(scope.row)" -->
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link size="small" @click="editRow(scope.row)">修改</el-button>
                        <el-button type="primary" link size="small" @click="delRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-block">
            <el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]"
                :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                :total="total" :hide-on-single-page="true" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <article-detail v-model:dialogDrawer="dialogFormVisible" :defaultForm="form" :title="title" :navList="navList"
            @onDetailSubmit="onDetailSubmit"></article-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, onMounted, ref,nextTick } from 'vue'
import ArticleDetail from '../components/ArticleDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageList, get, updateStatus, remove } from '/@/api/pms/article'
import api from '/@/api/commonApi'
export default {
    name: 'Article',
    components: {
        ArticleDetail
    },
    setup() {
        const refInput =ref()
        const state = reactive({
            inputVisible: false,
            inputValue: '',
            list: [],
            search: {
                current: 1,
                size: 10
            },
            title: '新增运费模板',
            navList: [],
            form: {},
            dialogFormVisible: false,
            total: 100,
            current: 1,
            page: 10,
			statusOptions:[
				{
				    value: '0',
				    label: '未发布',
				  },
				  {
				    value: '1',
				    label: '已发布',
				  },
			]
        })
        const add = () => {
            restForm()
            state.title = '新增文章'
            state.dialogFormVisible = true
        }
        const editRow = row => {
            state.title = '编辑文章'
            get(row.id).then(res => {
                state.form = res.data
                state.form.showPlatform = parseInt(res.data.showPlatform)        
                state.form.status = parseInt(res.data.status)
            })
            state.dialogFormVisible = true
        }
        const restForm = () => {
            state.form = {
                id: null,
				status:0,
				title:null,
				articleAbstract:null,
				articleDesc:null,
				author:null,
                showPlatform: 0,
                navIds: [],
                tag: '',
				knowledgeArticleSkuRelations:[]
            }
        }
        const delRow = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.title + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                remove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })

            }).catch()
        }
        const getList = () => {
            pageList(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        const onDetailSubmit = () => {
            getList()
            state.dialogFormVisible = false
        }
        const changeStatus = (row) => {
            updateStatus({ id: row.id, status: row.status }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('修改成功')
                    getList()
                } else {
                    ElMessage.error('修改失败:' + res.message)
                }
            })
        }
		const filterSubmit = ()=>{
			state.search.current = 1
			 getList()
		}
		const reset = ()=>{
			state.search = {
			    current: 1,
			    size: 10,
				title:'',
				status: ''
			}
			getList()
		}
        const getNavList = () => {
            api.getNavList().then(res => {
                state.navList = res.data
            })
        }
        const showInput = () => {
            state.inputVisible = true
            nextTick(() => {
                InputRef.value.focus()
            })
        }
        const updateTag = () => {
            if (state.inputValue == '' || state.inputValue == null) {
                ElMessage.error("标签不能为空")
            }else{
                api.updateTag({ tag: state.inputValue}).then(res => {
                    ElMessage.success("设置标签成功")
                    state.inputVisible = false
                })
            }
        }
        const getTag = () => {
            api.getTag().then(res => {
                state.inputValue = res.data
            })
        }
        onMounted(() => {
            getList()
            getNavList()
            getTag()
        })
        return {
            add,
            editRow,
            delRow,
            updateTag,
            showInput,
            handleSizeChange,
            handleCurrentChange,
            onDetailSubmit,
            restForm,
            changeStatus,
			filterSubmit,
			reset,
            ...toRefs(state)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.page-container {
    .table-list {
        background: var(--next-color-white);
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }
}
</style>